<template>
  <div>
    <p>clicked: {{ count }} count is {{ oddOrEven }}</p>
    <button @click="INCREMENT(1)">increment</button>
    <button @click="DECREMENT(1)">decrement</button>
    <button @click="incrementIfOdd(1)">increment if odd</button>
    <button @click="incrementAsync(1)">inrement async</button>
  </div>
</template>

<script>
import { mapState, mapGetters, mapActions, mapMutations } from "vuex";
export default {
  name: "App",
  computed: {
    // 映射和之前state一样的
    /* mapState是一个函数，返回是一个对象

      count:function(){
        return this.$store.state.count
      }
     */
    ...mapState(["count"]),
    ...mapGetters(["oddOrEven"]),
  },
  methods: {
    // 解构出来,内部分装好
    /* 
      incrementIfOdd(){

      }
     */
    ...mapActions(["incrementIfOdd", "incrementAsync"]),
    ...mapMutations(["INCREMENT", "DECREMENT"]),
    // increment() {
    //   console.log(this.$store);
    //   // 直接触发mutations直接修改函数
    //   this.$store.commit("INCREMENT", 1);
    // },
    // decrement() {
    //   this.$store.commit("DECREMENT", 1);
    // },
    // incrementIfOdd() {
    //   this.$store.dispatch("incrementIfOdd", 1);
    // },
    // incrementAsync() {
    //   this.$store.dispatch("incrementAsync", 2);
    // },
  },
};
</script>

<style>
</style>